<template>
  <div class="fillcontain" style="padding: 25px 15px 15px;">
    <div style="display:flex; height: auto;">
      <exam-project-library-list @queryTableData="queryTableData" ref="projectLibraryList" :manual="true"></exam-project-library-list>
      <!-- 右侧表格 -->
      <div class="rightBox">
        <div class="right-title">{{ tableTitle ? `${tableTitle}-项目信息` : '项目信息' }}</div>

        <div style="margin:25px 0px 0px 20px ;">
          <el-form :model="searchParams" label-width="120px" style="margin-bottom: 10px;">
            <el-row>
              <el-col :span="8" class="common-box">
                <el-form-item label="渠道" prop="physicalExaminationOrgId">
                  <el-select clearable v-model="searchParams.physicalExaminationOrgId" filterable placeholder="请选择">
                    <el-option v-for="item in companyOptions" :key="item.id" :label="item.dictValue"
                    :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="项目编码" prop="projectCode">
                  <el-input clearable v-model="searchParams.projectCode" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" class="text_center">
                <el-button  tton type="primary" icon="el-icon-search" @click="queryTableData(null)"></el-button>
                <!-- <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button> -->
              </el-col>
            </el-row>
          </el-form>
          <!-- headStyle表头内容居中方法  rowStyle表格内容居中方法  -->
          <el-table ref="multipleTable" :data="relationList"  style="width: 100%;" height="calc(100vh - 380px)">
            <el-table-column type="index" width="100" label="序号" align="center"> </el-table-column>
            <el-table-column label="子项目名称" min-width="160" show-overflow-tooltip align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.projectName }}</span>
              </template>
            </el-table-column>

            <el-table-column label="子项目编码" min-width="120" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.projectCode" placeholder="请输入" style="width:200px ;" :disabled="currentRow.isLock" :maxlength="50" @input="inputChange($event,scope.row,'projectCode')">
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
				<div style="text-align:center; margin: 16px 0;">
					<el-button class="Defaultbutton" @click="savePage" :disabled="currentRow.isLock">保存</el-button>
				</div>
      </div>

    </div>
  </div>
</template>

<script>
import { getProjectInfo, saveProjectInfo, getExamProjectLibraryList  } from '@/api/setting/maintain/codeMapMaintain.js'
import constant from '@/utils/constant'
import {
		getCodeDictProject,
	} from "@/api/taskCenter/enterWorkPool";
import examProjectLibraryList from '../../../../common/examProjectLibraryList.vue'

export default {
  components: {
    examProjectLibraryList,
  },
  data() {
    return {
      // 表格数据
      tableTitle: '',
      relationList: [],
      searchParams: {
        "physicalExaminationOrgId": '',
        "projectCode": "",
      },
      companyOptions: [],
      currentRow: {},
    }
  },
  async activated() {
    // getExamProjectLibraryList().then(res => {
    //   this.treeData[0].children = res.data;
    // })
    if(!this.companyOptions.length) await getCodeDictProject('peOrg').then( res => {
      this.companyOptions = res.data;
    });
    this.$refs.projectLibraryList.currentId = null
    this.$refs.projectLibraryList.filterText = ''
    this.searchParams = {
      "physicalExaminationOrgId": '',
      "projectCode": "",
    }
    this.$refs.projectLibraryList.getProjectLibraryList()
  },
  methods: {
    queryTableData(id, title, isLock, currentRow) {
      if(id !== null) {
        this.searchParams.physicalExaminationProjectId = id;
        this.tableTitle = title;
        this.currentRow = currentRow
      }
      let params = JSON.parse(JSON.stringify(this.searchParams))
      if(!params.physicalExaminationOrgId) params.physicalExaminationOrgId = this.companyOptions[0].id || ''
      this.$store.dispatch('loading/CHANGE_LOADING', true);
      this.relationList = []
      getProjectInfo(params).then( res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false);
        this.relationList = res.data || []
      }).catch(err => {
				this.$store.dispatch('loading/CHANGE_LOADING', false);
			})
    },
    inputChange(el,row,field){
      let val = el.replace(/[^a-zA-Z\d\-\_]/g,"")
      this.$set(row,field,val)
    },
    savePage() {
      this.relationList.forEach(item=>{
        if(item.projectCode) item.projectCode = item.projectCode.trim()
      })
      let codes = this.relationList.filter(fItem=>fItem.projectCode).map(item=>item.projectCode)
      let arr1 = [...new Set(codes)]
      if(arr1.length<codes.length) {
        this.$message.warning('子项目编码不能重复')
        return
      }
      if(this.relationList.length && !this.relationList[0].physicalExaminationOrgId){
        this.relationList.forEach(item=>{
          item.physicalExaminationOrgId = this.companyOptions[0].id || ''
        })
      }
      this.$store.dispatch('loading/CHANGE_LOADING', true);
			saveProjectInfo(this.relationList).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false);
        if (res.resultCode == constant.SUCCESS) {
          this.$message.success('保存成功')
        }
      }).catch(err => {
				this.$store.dispatch('loading/CHANGE_LOADING', false);
			})
		},
  }
}

</script>

<style lang="less" scoped>
// * {
//   margin: 0;
//   padding: 0;
// }

.top_box {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgb(241, 238, 238);
}

.top_box h1 {
  font-weight: 600;
  margin-left: 15px;
}



/* 右侧表格 */
.rightBox {
  flex: 1;
  // border: 1px solid #e3dddd;
  overflow-x: hidden;
	.right-top {
		background-color:#f1eeee;
		height: 50px;
		line-height: 50px;
		font-size: 14px;
		font-weight: 700;
		span{
			border-left: 4px solid #0a66e6;
			padding-left: 20px;
		}
	}
}
.right-title{
  background: #f8f8f8;
  padding: 10px 25px;
  margin-left: 15px;
  position: relative;
}
.right-title::before{
  content: '';
  position: absolute;
  top: 11px;
  left: 15px;
  width: 3px;
  height: 18px;
  background: #f76767;
}

.rightBox /deep/ .el-table .cell {
  display: flex;
  justify-content: center;
	flex-wrap: wrap;
  align-content: center;	
}
.btn {
  width: 15px;
  height: 15px;
  padding: 0px;
}
/deep/ i.el-icon-plus{
	font-size: 12px !important;
}

/deep/ .el-table .cell .el-tag {
  margin-right: 16px;
	overflow: visible !important;
}

/deep/ .el-button--text:focus, .el-button--text:hover {
  color: #66b1ff !important;
}
.Defaultbutton {
  padding: 7px 15px;
}
/deep/ .el-table__empty-block {
  width: 100% !important;
}
</style>